<template>
  <div class="card-container">
    <!-- 属性前如果不加冒号:  那么传递的是一个字符串数据 -->
    <!-- <el-button :round="false" :plain="true" type="danger">登录</el-button> -->
    <!-- 基本的数据遍历 -->
    <!-- <p v-for="item in list" :key="item.id">{{ item.carNumber }}</p> -->

    <!-- 搜索区域 -->
    <div class="search-container">
      <span class="search-label">车牌号码：</span>
      <el-input v-model="params.carNumber" clearable placeholder="请输入内容" class="search-main" @clear="getList" />
      <span class="search-label">车主姓名：</span>
      <el-input v-model="params.personName" clearable placeholder="请输入内容" class="search-main" @clear="getList" />
      <span class="search-label">状态：</span>
      <el-select v-model="params.cardStatus">
        <!-- <el-option v-for="item in []" :key="item.id" /> -->
        <!-- 后端人比较好 你可以传 字符串01 也可以传数字01 -->
        <el-option label="可用" :value="0" />
        <el-option label="已过期" :value="1" />
        <!-- 全部数据 需要提供null  表示没有这个条件 -->
        <el-option label="全部" :value="null" />
      </el-select>
      <el-button type="primary" class="search-btn" @click="getList">查询</el-button>
    </div>

    <!-- 新增删除操作区域 -->
    <div class="create-container">
      <el-button type="primary" @click="addCard">添加月卡</el-button>
      <el-button @click="delMore">批量删除</el-button>
    </div>

    <!-- 表格区域 -->
    <div class="table">
      <!-- elementui中的表格组件 重点说!!! -->
      <!--
        需要给这个el-table组件传递一个数据 data 就会自动遍历生成一个个结构
       -->
      <!-- {{ total }} -->
      <el-table :data="list" style="width: 100%" @selection-change="fn">
        <!-- 实现选择的一列 -->
        <el-table-column type="selection" width="100" />
        <!-- type="index" 渲染序号 -->
        <el-table-column type="index" label="序号" />
        <!-- prop="xxx" 拿到每一项的xxx字段进行该列的展示 -->
        <el-table-column label="车主名称" prop="personName" />
        <el-table-column label="联系方式" prop="phoneNumber" />
        <el-table-column label="车牌号码" prop="carNumber" />
        <el-table-column label="车辆品牌" prop="carBrand" />
        <el-table-column label="剩余有效天数" prop="totalEffectiveDate" />
        <el-table-column label="操作" fixed="right" width="180">
          <template #default="scope">
            <el-button size="mini" type="text">续费</el-button>
            <el-button size="mini" type="text">查看</el-button>
            <el-button size="mini" type="text" @click="jump(scope.row.id)">编辑</el-button>
            <!-- 当前数据的id  scope是个对象    scope.row表示这一行   scope.row.id表示这一行数据id -->
            <el-button size="mini" type="text" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页结构 -->
    <div class="page-container">
      <!--
        layout布局控件
        total总数
        current-page当前页
        page-sizes可以选择的每页多少条       [1,2,3,4,5]
        page-size每页多少条                已经选择的每页条数3

        设想一个场景:
        一共100条数据
        选择了每页1条  可以在第100页
        选择了每页100条 只有一页 也只能在第一页
       -->
      <el-pagination
        layout="total, sizes, prev, pager, next"
        :total="total"
        :current-page="params.page"
        :page-sizes="[2, 4, 6, 8, 10]"
        :page-size="params.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 添加楼宇(默认隐藏的一个弹窗) -->
    <el-dialog
      title="添加楼宇"
      width="580px"
    >
      <!-- 表单接口 -->
      <div class="form-container">
        <!-- <el-form ref="addForm" :model="addForm" :rules="addFormRules">
          <el-form-item label="楼宇名称" prop="name">
            <el-input v-model="addForm.name" />
          </el-form-item>
          <el-form-item label="楼宇层数" prop="floors">
            <el-input v-model="addForm.floors" />
          </el-form-item>
          <el-form-item label="在管面积" prop="area">
            <el-input v-model="addForm.area" />
          </el-form-item>
          <el-form-item label="物业费" prop="propertyFeePrice">
            <el-input v-model="addForm.propertyFeePrice" />
          </el-form-item>
        </el-form> -->
      </div>
      <template #footer>
        <el-button size="mini">取 消</el-button>
        <el-button size="mini" type="primary">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
/*
  请求接口 正常 绝大多数情况(99.9%)下 都是正常响应数据 响应状态码200
              极少数情况下 不会响应数据  响应状态码 401 未授权(不认识你)
*/
import { getMonthCardListAPI, delCarCardAPI } from '@/api/car'
export default {
  data() {
    return {
      // 提供列表数据
      list: [], // 一会发请求获取后端接口中的数据存进来
      total: 0, // 总数
      params: {
        page: 1, // 4
        pageSize: 10, // 2    10
        carNumber: null, // 车牌号
        personName: null, // 车主姓名
        cardStatus: null // 可用状态
      }
    }
  },

  // created() {},

  mounted() {
    // 这是一个生命周期函数(钩子函数) 特定时机执行的函数 => 页面加载完成
    // console.log('页面加载好了, 可以发请求渲染页面结构了')
    // getMonthCardListAPI(this.params).then((res) => {
    //   //
    //   // 一定是请求结束之后才会执行
    //   // 响应回来的数据 就是res参数
    //   console.log(res.data, 999)
    //   this.list = res.data.rows
    //   this.total = res.data.total
    // })

    this.getList()

    // 原地发请求 => 封装一个接口函数 在这里调用

    // 伪代码 => 用于分析逻辑
    // this.list = [
    //   { id: 1, name: '张三', age: 19 },
    //   { id: 2, name: '张三', age: 19 },
    //   { id: 3, name: '张三', age: 19 }
    // ]
  },

  methods: {
    fn(val) {
      // 选中项变化时触发selection-change事件 监听这个事件 =>
      // val => 就是选中项们 => 选中的那一行对象数据组成的数组
      console.log(val)

      // val[0].id + ',' + val[1].id + ',' + val[2].id + ',' + val[3].id

      // val数组的长度你不知道的?? => 用户选中的几个就是几个

      // map => [1,2,3] => '1,2,3'
      // val.map(item => {
      //   return item.id
      // })

      // let 定义的变量  const 定义的常量(不会变化的)

      let str = ''
      // 数组遍历 for循环
      for (let index = 0; index < val.length; index++) {
        const temp = val[index]
        // console.log(temp.id)
        str = str + temp.id + ',' // 每遍历到一个数据 取出id 拼接在str上
      }

      // console.log(str) // 1,4,6,
      // console.log() // 1,4,6
      const idStr = str.slice(0, str.length - 1)
      this.idStr = idStr // 存储id组成的字符串
    },

    delMore() {
      this.$confirm('你确定要删除这些月卡么?').then(() => {
        // 确定删除
        delCarCardAPI(this.idStr).then(() => {
          // 删除后
          // 提示
          this.$message.success('删除成功')
          // 重新获取数据
          this.getList()
        })
      })
    },

    jump(id) {
      // 跳转之前的添加页面 + 还需要携带id数据
      // console.log(id)
      this.$router.push('/addCard?id=' + id) // vue中跳转页面 携带参数
    },

    del(id) {
      // console.log('我要没了..', id)

      // 调用接口函数 请求删除
      // request({ url: ''})

      // elementui提供了一个组件 确认组件 => this.$confirm
      // 怎么表示点了确认 / 取消
      this.$confirm('你确认要删了么???').then(() => {
        // 点击确认后执行
        // console.log(1)
        delCarCardAPI(id).then(() => {
        // 删除成功后 => 后端数据已删除

          // 前端数据还没更新
          this.getList()

          // 给个提示
          this.$message.success('删除成功')
        }).catch(() => {
          this.$message.error('删除失败')
        })
      }).catch(() => {
        // 点击取消后执行
        console.log(2)
      })
    },

    getList() {
      getMonthCardListAPI(this.params).then((res) => {
        this.list = res.data.rows
        this.total = res.data.total
      })
    },

    handleSizeChange(pageSize) {
      // console.log('每页条数变化了', pageSize)
      this.params.pageSize = pageSize // 更新每页条数
      this.params.page = 1 // 以前必须这么做 => 以前不会主动重置(已经修复)

      this.getList()
    },
    handleCurrentChange(page) {
      console.log('页码变化了', page)
      // 更新页码
      this.params.page = page
      // 重新获取最新页码的数据
      this.getList()
    },

    addCard() {
      // 跳转到添加月卡页面
      this.$router.push('/addCard')
    }
  }
}
</script>

<style lang="scss" scoped>
.card-container {
  padding: 20px;
  background-color: #fff;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  padding-bottom: 20px;
  .search-main {
    width: 220px;
    margin-right: 10px;
  }
  .search-btn{
    margin-left:20px;
  }
}
.create-container{
  margin: 10px 0px;
}
.page-container{
  padding:4px 0px;
  text-align: right;
}
.form-container{
  padding:0px 80px;
}
</style>
